<template>
	<view class="public-index-wrap">
		<view class="release-wrap">
			<view class="files">
				<image v-for="(item, index) in postParams.imgs" :key="index" :src="item.filePath" class="cover" />
				<view v-if="showAddIcon">
					<image src="../../static/file_icon.png" class="cover" @tap.stop="showSheet" />
				</view>
			</view>
			<view class="content">
				<view class="title">
					<input v-model.trim="postParams.title" type="text" placeholder="输入标题会引起更多人关注" maxlength="50" />
				</view>
				<view class="describe">
					<textarea v-model.trim="postParams.describe" placeholder="输入正文" maxlength="500" />
				</view>
				<view class="address" v-if="false">
					<view class="address-l">
						<image src="/static/images/address.png" mode="widthFix" /> 地点
					</view>
					<view class="address-r">
						<image src="/static/images/arrow_r.png" mode="widthFix" />
					</view>
				</view>
			</view>
		</view>
		<view class="public-btn-class fixed">
			<view class="common-btn mg-d-s pd" :class="{ active: true }" @tap.stop="postForm">发布作品</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postParams: {
					title: '',
					describe: '',
					imgs: [],
					address: '',
					topic: '',
					tag: [],
				},
			};
		},
		computed: {
			showAddIcon() {
				let flag = true;
				// 判断图片上传张数是否大于5张
				if (this.postParams.imgs.length > 0) {
					if (this.postParams.imgs.length >= 9) {
						flag = false;
					}
				}
				return flag;
			},
		},
		methods: {
			async postForm() {
				// 非空验证
				if (this.postParams.imgs.length <= 0) {
					uni.showToast({
						title: '请上传图片或视频',
						icon: 'none',
					});
					return false;
				}
				if (!this.postParams.title.trim() || !this.postParams.describe.trim()) {
					uni.showToast({
						title: '标题和正文不能为空',
						icon: 'none',
					});
					return;
				}

				let {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/add', {
					userId: this.userId,
					title: this.postParams.title,
					image: this.postParams.imgs,
					Copywriting: this.postParams.describe
				});
				if (res.code == 200) {
					uni.showToast({
						title: '发布成功',
						icon: 'none',
						success: () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					});
					this.postParams = {
						title: '',
						describe: '',
						imgs: [],
						address: '',
						topic: '',
						tag: [],
					};

				}
			},
			changeSheet({
				detail
			}) {
				console.log(detail);
			},
			showSheet() {
				let _this = this;
				if (this.postParams.imgs.length > 0) {
					if (this.postParams.imgs[0].type == 'image') {
						_this.uploadChange(0);
					}
					return false;
				}
				uni.showActionSheet({
					itemList: ['图片'],
					success: function(res) {
						_this.uploadChange(res.tapIndex);
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			uploadChange(index) {
				let _this = this;
				if (!index) {
					// uni.chooseImage({
					// 	count: 5,
					// 	sizeType: ['compressed'],
					// 	sourceType: ['album', 'camera'],
					// 	success: function(res) {
					// 		let tempFilePaths = res.tempFilePaths;
					// 		// 将选择的图片路径添加到 postParams.imgs 数组中
					// 		_this.postParams.imgs.push({
					// 			filePath: tempFilePaths[0],
					// 			type: 'image' // 根据实际情况添加图片类型字段
					// 		});
					// 	},
					// });

					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							let tempFilePath = res.tempFilePaths[0];

							// 保存文件到本地
							uni.saveFile({
								tempFilePath: tempFilePath,
								success: function(saveRes) {
									let savedFilePath = saveRes.savedFilePath;
									_this.postParams.imgs.push({
										filePath: savedFilePath,
										type: 'image' // 根据实际情况添加图片类型字段
									});
									console.log('文件保存成功:', savedFilePath);

									// 在这里可以将 savedFilePath 存储到你的数据结构中，或者进行其他操作
								},
								fail: function(saveError) {
									console.error('文件保存失败:', saveError);
								}
							});
						},
						fail: function(chooseError) {
							console.error('选择图片失败:', chooseError);
						}
					});

				}
				// uploadChange(index) {
				// 	let _this = this;
				// 	if (!index) {
				// 		uni.chooseImage({
				// 			count: 1, // 默认9
				// 			sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
				// 			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				// 			success: function(res) {
				// 				let tempFilePaths = res.tempFilePaths;
				// 				uni.showLoading({
				// 					title: '加载中'
				// 				});
				// 				uni.uploadFile({
				// 				    url: `${_this.$store.state.httpUrl}/api/upload`, // 上传的目标地址
				// 				    name: 'uploadFile', // 上传文件对应的 key
				// 				    filePath: tempFilePaths[0], // 要上传文件的本地路径
				// 				    header: {
				// 				        'content-type': 'application/json', // 请求头的 content-type 设置为 JSON
				// 				        'authorization': _this.$store.state.token || '', // 上传请求的授权信息，通常用于身份验证
				// 				    },
				// 				    formData: {
				// 				        method: 'POST', // 表单数据，这里指定了请求的方法为 POST
				// 				    },
				// 				    success: function(res) { // 上传成功的回调函数
				// 				        let obj = JSON.parse(res.data); // 将服务器返回的 JSON 字符串解析为 JavaScript 对象
				// 				        if (!obj.errno) { // 如果服务器返回的数据中 errno 为假（通常表示没有错误）
				// 				            _this.postParams.imgs = _this.postParams.imgs.concat(obj.data); // 将上传成功的文件信息添加到 postParams.imgs 数组中
				// 				        } else {
				// 				            if (obj.errno == '40202') { // 如果服务器返回的错误码为 '40202'
				// 				                uni.navigateTo({
				// 				                    url: '../grant/main', // 跳转到授权页面
				// 				                });
				// 				            }
				// 				        }
				// 				        uni.hideLoading(); // 隐藏加载提示
				// 				    },
				// 				    fail: function(res) { // 上传失败的回调函数
				// 				        console.log('fail'); // 在控制台输出 'fail'
				// 				        uni.hideLoading(); // 隐藏加载提示
				// 				    },
				// 				});
				// 			},
				// 		});
				//存储视频的逻辑
				// } else {
				// 	uni.chooseVideo({
				// 		sourceType: ['album', 'camera'],
				// 		maxDuration: 60,
				// 		camera: 'back',
				// 		success(res) {
				// 			uni.showLoading({
				// 				title: '加载中',
				// 			});
				// 			uni.uploadFile({
				// 				url: `${_this.$store.state.httpUrl}/api/upload`,
				// 				name: 'uploadFile',
				// 				filePath: res.tempFilePath,
				// 				header: {
				// 					'content-type': 'application/json',
				// 					authorization: _this.$store.state.token || '',
				// 				},
				// 				formData: {
				// 					method: 'POST',
				// 				},
				// 				success: function(res) {
				// 					let obj = JSON.parse(res.data);
				// 					if (!obj.errno) {
				// 						_this.postParams.imgs = _this.postParams.imgs.concat(obj.data);
				// 					} else {
				// 						if (obj.errno == '40202') {
				// 							uni.navigateTo({
				// 								url: '../grant/main',
				// 							});
				// 						}
				// 					}
				// 					uni.hideLoading();
				// 				},
				// 				fail: function(res) {
				// 					console.log('fail');
				// 					uni.hideLoading();
				// 				},
				// 			});
				// 		},
				// 	});
				// }
			},
		},
		onShow() {
			// if (!this.userInfo) {
			//   uni.navigateTo({ url: '../grant/main' });
			// }
		},
	};
</script>

<style scoped lang="less">
	.public-index-wrap {
		position: relative;

		.release-wrap {
			padding: 15px 10px;
			box-sizing: border-box;
		}

		.files {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;


			.cover {
				object-fit: cover;
				width: calc(33vw - 15px);
				height: calc(33vw - 15px);
				margin-right: 10px;
				margin-bottom: 10px;
				position: relative;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		.content {
			font-size: 14px;

			.title {
				border-bottom: 1px solid #eee;
				padding: 15px 0;
				font-size: 16px;
				font-weight: bold;
			}

			.describe {
				border-bottom: 1px solid #eee;
				padding: 15px 0;

				textarea {
					width: 100%;
					height: 150px;
				}
			}

			.address {
				padding: 15px 0;
				border-bottom: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.address-l {
					display: flex;
					align-items: center;

					img {
						width: 14px;
						margin-right: 6px;
					}
				}

				.address-r {
					img {
						display: block;
						width: 8px;
					}
				}
			}
		}

		.public-btn-class {
			position: sticky;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 50px;
			border-radius: 20px;
			background-color: rgb(7, 193, 96);
		}
	}
</style>